<script setup lang="ts">
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import Menu from '../components/Menu.vue';
import BreadNav from '../components/BreadNav.vue';
import { RouterView } from 'vue-router'
import { useTokenStore } from '../store/UseTokenStore';
import router from '../router';
import CommonConstant from '../common/SystemConstant';

const tokenManager = useTokenStore()
if (!!!tokenManager.getToken) {
    router.push(CommonConstant.loginRoutePath);
}

</script>

<template>

    <el-container class="h-screen">
        <el-header>
            <Header></Header>
        </el-header>

        <el-container>
            <el-aside width="200px">
                <Menu></Menu>
            </el-aside>
            <el-container class="content">
                <el-main>
                    <el-affix :offset="80">
                        <BreadNav></BreadNav>
                    </el-affix>
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                {{ $router.currentRoute.value.name }}
                            </div>
                        </template>
                        <router-view></router-view>
                    </el-card>
                </el-main>
                <el-footer>
                    <el-card>
                        <Footer></Footer>
                    </el-card>
                    
                </el-footer>
            </el-container>
        </el-container>
    </el-container>

</template>


<style scoped>

.el-header {
    border-bottom: 1px solid #e5e7eb;
}
.content {
    height: calc(100vh - 66px);
}
</style>
